<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:20px">
      <div class="filter_head flex_div">
        <h2>会员开通记录</h2>
      </div>
    </div>
    <div class="list_con" style="padding-top: 10px;">
      <el-table :data="dataList" style="width: 100%" class="mt_15">
        <el-table-column
          prop="user_id"
          label="用户"
          width="180"
        ></el-table-column>
        <el-table-column label="等级" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.old_level ? scope.row.old_level : 0 }}</span>
            <span>→</span>
            <span>{{ scope.row.new_level }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额" >
        </el-table-column>
        <el-table-column prop="trade" label="订单" >
        </el-table-column>
        <el-table-column prop="source" label="来源" >
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" >
        </el-table-column>
       <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row.id)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="table_footer">
        <el-pagination
          @current-change="changePage"
          :current-page="page"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import { getRecordList } from "@/api/mall/vipuser";
export default {
  data() {
    return {
      obj: {},
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      dataList: [],
      detailList: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取列表
    getData() {
      let data={
        page:this.page
      }
      getRecordList(data).then(res => {
        this.dataList = res.msg.data;
        this.total = res.msg.total;
      });
    },
    // 详情
    detail(id) {
      let data = { id };
      this.detailList = [];
      getRecordListDetails(data).then(res => {
        this.detailList = res.msg;
        this.showDetail = true
      });
    },
    changePage(page) {
      this.page = page;
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
.filter_head {
  h2 {
    margin: 10px 0;
  }
}
.flex_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form {
  display: flex;
  .form_content {
    margin-left: 100px;
  }
  .form_content:first-child {
    margin-left: 20px;
  }
  .el-input {
    width: 250px;
  }
}
</style>
